import comm from '../utils/comm.js'
import { Collapse } from 'react-collapse';
import react, { useState, useEffect, useCallback } from 'react'

function List(props) {

  let [collOpen, setCollOpen] = new useState(false);

  useEffect(() => {
    setCollOpen(false);
  }, [props.rowData])

  return (
    <div>
      <div className='tb-row cus-tr'>
        <div className='tb-col'>
          <input type="checkbox" name="reading" checked={props.rowData.isComplete} onChange={() => { props.checkCallback(props.rowData.timestamp) }} />
          <span className={props.rowData.isComplete ? 'del-task' : ''}>{props.rowData.taskName}</span>
        </div>
        <div className='tb-col'>₽ {comm.numFormat(props.rowData.RUB)}</div>
        <div className='tb-col'>$ {comm.numFormat(props.rowData.USD)}</div>
        <div className='tb-col'>¥ {comm.numFormat(props.rowData.CNY)}</div>
        <div className='tb-col'>
          <span className='suspen' onClick={() => { setCollOpen(!collOpen) }}>txhash</span>&nbsp;
              {props.rowData.record ? <span className='suspen' >交易记录</span> : null}
        </div>
      </div>
      <Collapse isOpened={collOpen}>
        <div className='tb-row cus-tr flex-direction'>
          {props.rowData.txHash ? <div>txHash：{props.rowData.txHash}</div> : null}
          {props.rowData.hash ? <div>hash：{props.rowData.hash}</div> : null}
          {props.rowData.prevHash ? <div>prevHash：{props.rowData.prevHash}</div> : null}
        </div>
      </Collapse>
    </div>)
}

export function Tables({ title, resultTitle, tableData, checkCallback }) {

  let checkChange = useCallback((data) => {
    if (checkCallback) checkCallback(data);
  }, [tableData]);

  return (
    <div className="tables">
      <div className="tb-row">
        <div className="tb-col">{title}：</div>
      </div>
      <div className='tb-body'>
        {tableData.map((data, i) => {
          return <List rowData={data} key={i} checkCallback={checkChange} />
        })}
      </div>
      <div className="tb-row">
        <div className="tb-col">{resultTitle}：</div>
        <div className="tb-col">₽ {comm.numFormat(comm.countPrice(tableData, 'RUB'))} </div>
        <div className="tb-col">$ {comm.numFormat(comm.countPrice(tableData, 'USD'))}</div>
        <div className="tb-col">¥ {comm.numFormat(comm.countPrice(tableData, 'CNY'))}</div>
      </div>
    </div>
  )
}


//任务面板
export function TaskTables({ taskList, changeTaskList }) {
  let toBeCompletedTask = [];
  let completedTask = [];
  for (let obj of taskList) {
    if (!obj.isComplete) {
      toBeCompletedTask.push(obj);
    } else {
      completedTask.push(obj);
    }
  }
  return (
    <div>
      <Tables title='计划' resultTitle='将要花费' tableData={toBeCompletedTask} checkCallback={changeTaskList}></Tables>
      <Tables title='已完成' resultTitle='一共花了' tableData={completedTask} checkCallback={changeTaskList}></Tables>
    </div>)
}